<!-- 我的收藏 -->
<template>
    <el-row style="margin-left: 30px;margin-bottom: 20px;">
        <el-col v-for="(item, index) in displayedData" :key="index" :span="24" :offset="index > 0 ? 0 : 0">
            <el-card :body-style="{ padding: '20px' }" style="margin-top: 30px;cursor: pointer; "
                @click="goBackcoudetails(item.course.courseId)">
                <div>
                    <span style="font-size: 16px;float: left;font-weight: bold;">课程号：{{ item.course.courseId }}</span>
                    <span style="float: right;font-size: 16px;font-weight: bold;color: rgb(88, 168, 243);">类型：
                        {{ item.course.courseType }}</span>
                </div>
                <div style="margin-top: 40px;">
                    <img :src="item.course.courseCover" style="width: 200px;" />
                    <span style="margin-left: 20px;">{{ item.course.courseName }}</span>
                </div>
                <div style="float: right;margin-bottom: 20px;">状态：{{ item.course.courseState }}</div>
            </el-card>
        </el-col>
    </el-row>
    <!-- 分页 -->
    <el-row>
        <el-pagination background layout="prev, pager, next" :current-page="currentPage" :page-size="pageSize"
            @current-change="changePage" :total="reccourselData.length" style="margin-left: 400px;" />
    </el-row>
</template>
<script>
import axios from '../../api/index';
import { ref, reactive, onMounted, computed } from 'vue'
// import { ref, reactive } from 'vue'
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from 'vue-router';



export default {
    setup() {

        let token = localStorage.getItem('token');
        let longtoken = localStorage.getItem('longtoken');
        const reccourselData = ref([]);
        const currentPage = ref(1); // 当前页码  
        const pageSize = ref(5); // 每页数据数量
        const route = useRoute();
        const router = useRouter();

        // 从localStorage中获取存储的JSON字符串  
        var userInfoJsonString = localStorage.getItem('userInfo');

        // 确保userInfoJsonString不是null，如果是null，那么将其设置为空字符串  
        if (userInfoJsonString === null) {
            userInfoJsonString = "{}";
        }
        // 解析JSON字符串为JavaScript对象  
        var userInfo = JSON.parse(userInfoJsonString);

        onMounted(async () => {
            try {

                //发起请求
                axios.get('/collect/myCollect', {
                    params: {
                        userId: userInfo.id
                    },
                    headers: {
                        token: token,
                        longtoken: longtoken
                    }
                }).then(response => {
                    if (response.code === 200) {

                        for (let index = 0; index < response.data.length; index++) {
                            if (response.data[index].course.courseState == 1) {
                                response.data[index].course.courseState = '上架'
                            } else {
                                response.data[index].course.courseState = '下架'
                            }
                        }
                        for (let index = 0; index < response.data.length; index++) {
                            if (response.data[index].course.courseType === "video") {
                                response.data[index].course.courseType = '视频'
                            } else if (response.data[index].course.courseType === "book") {
                                response.data[index].course.courseType = '电子书'
                            }
                        }

                        reccourselData.value = response.data;
                        console.log(reccourselData.value);

                    } else {
                        ElMessage.error("暂无数据~~");
                    }
                })
            } catch (error) {
                ElMessage.error("臣妾未能请求到数据，给客官赔罪啦~~");
            }

        });
        const displayedData = computed(() => {
            const start = (currentPage.value - 1) * pageSize.value;
            const end = start + pageSize.value;
            return reccourselData.value.slice(start, end);
        });
        function changePage(newPage) {
            currentPage.value = newPage;
        }

        function goBackcoudetails(Item) {
            router.push("/productChild/" + Item)
        }

        return {
            goBackcoudetails,
            reccourselData,
            changePage,
            displayedData,
            pageSize,
            currentPage,
            token,
            longtoken,
            route,
            router,
        }
    }
}

</script>
<style></style>